<template>
    <div id='login'>
        <!--中间的容器盒子-->
        <div class="login_box">
            <!--顶部图片的div容器-->
            <div class="img_box">
                <img src="@/assets/logo.png" alt="" />
            </div>
            <!--登录表单-->
            <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px"
                class="loginForm_box">
                <el-form-item prop="loginId">
                    <el-input v-model="loginForm.loginId" prefix-icon="iconfont icon-user" class="box-1"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"
                        class="box-1"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login" class="box-1">登录</el-button>
                    <el-button type="info" @click="resetLoginForm" class="box-1">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表单对应的数据对象
            loginForm: {
                loginId: 'admin',
                password: '123456'
            },
            // 表单校验规则
            loginFormRules: {
                loginId: [
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 5, max: 8, message: '请输入 5 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 6, max: 10, message: '请输入 6 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 重置按钮
        resetLoginForm() {
            // 重置表单的所有项
            this.$refs.loginFormRef.resetFields()
        },
        // 登录按钮
        login() {
            // 判断表单校验是否有效
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid)
                    return this.$message.error('校验失败')

                // 发登录请求
                // const { data: res } = await this.$http.post('/login', this.loginForm)
                const data = await this.$http.post(`/user/login/`, this.loginForm)

                console.log(data)

                // if (data.status !== 200)
                if (data.data === "error")
                    return this.$message.error('用户名或密码有误!')

                this.$message.success('登录成功')
                // 保存 token 到 sessionStorage, 与localStorage区别

                sessionStorage.setItem('token', data.data)

                // 导航到 Home 组件
                this.$router.push('/home')


            })
        }
    }
};
</script>

<style scoped>
#login {
    background-color: aqua;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;

    /* 绝对居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
}

.img_box {
    border: 1px solid red;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    padding: 10px;
    box-shadow: 0 0 10px;
    background-color: #fff;

    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
        border: 1px solid red;
        border-radius: 50%;
        width: 130px;
        height: 130px;
    }
}

.loginForm_box {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 0 20px;
    /*宽度会包含边框*/
    box-sizing: border-box;
}


.btns {
    display: flex;
    justify-content: end;
}



/* .box-1{
   box-shadow: 10px 10px rgba(0,0,0,0.5);
} */
/* 投影效果 */
.box-1 {
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
}
</style>